easyui combobox的增加全选解决方案

2024-06-08 07:35| 来源: 网络整理| 查看: 265

　 1、解决方案背景：

　　项目中偶然需要用到easyui的combobox的组件，但是本组件自己没有包含全选的api事件。搜索了一些解决方案，但是不是很符合，后来发现是因为所使用的版本不一致所导致的。项目中使用的1.5的版本，而网上大部分的解决方案都是采用的自定义onSelect的方案，自己动手试过，确实不能，因为1.5版本的组件，在自定义onSelect的函数触发后，选择了全部的值赋值给当前的组件，在赋值的同时，又会自动的触发onSelect的事件，会不断的陷入死循环中去。后来自己决定重新实现解决方案，重新定义onClick的事件，此事件是在1.5版本之后才有效使用的，下面介绍实现的具体方案。

2、实际解决方案：

自己封装AllCheckCombobox.js.源代码如下所示：

/** *自己扩展easyui的 combobox，使其能够有全选和反选的功能。 **/ var AllCheckCombobox = (function (mod,selectId){ var select = $("#"+selectId); /* * combobox获取data的函数，可以替换成动态后台ajax获取，此处只是静态数据模拟。 */ var getData = function (){ var data =[{"text":"长沙","value":"111"},{"text":"常德","value":"222"}]; data.unshift({"text":"全选/反选","value":""}); return data; }; /* * 扩展的核心函数之一，自己扩展combobox的onclick的函数，判断是否是全选/反选选项， * 若果是则选中全部的选项，否则，清空全部的选项 */ var onclick = function (record){ var valueField = select.combobox("options").valueField; if(!record[valueField]){ var data = select.combobox("getData"); var values = select.combobox("getValues"); var selectVaues = []; if((data.length - 1) != values.length){ data.reduce(function(prev, current, index, array){ selectVaues.push(current[valueField]); },selectVaues); }else{ selectVaues.push(record[valueField]); } select.combobox('setValues', selectVaues); } }; /* * combobox的初始化函数，还可以自己设定一些其他的选项，可以参看easyui的官网。 */ mod.initCombobox = function (){ $('#'+selectId).combobox({ valueField : 'value', textField : 'text', multiple : true, editable : false, panelHeight : 'auto', panelMaxHeight : 300, data : getData(), onClick:onclick, label : "城市 :", labelPosition : "before", labelAlign : 'right' }); }; return mod; })(window.AllCheckCombobox || {},'select');

　　具体的项目中的data 可以冲后台ajax获取，在动态获取到data数据后，自动的在最前面给增加一个"全选"的选项，扩展的onclick的事件，也是对当前的选择的值进行判断，得出的结果，来进行对当前的下拉框赋值操作。

3、测试代码：

测试页面 $(function(){ AllCheckCombobox.initCombobox(); });

　　 4、测试效果：

选择全选的选项，就会自动的选择下面的所有的值，获取当前选中的值，可以使用easyui的combobox的getValues获取。

【本文地址】

公司简介

联系我们